<template>
  <div class="model_contain">
    <!-- 头部标题 -->
    <div class="title">
      <div
        class="title_item"
        :class="{ active: second_kind_id === item.kindId }"
        v-for="(item, index) in titleList"
        :key="item.kindId"
        :data-num="item.kindId"
        @click="getDataBySecondId(item.kindId)"
      >
        {{ item.kindTitle }}
      </div>
    </div>
    <!-- 模板总个数 -->
    <div class="sorWrap">
      <div class="sotr_text">{{ total }}个模板</div>
      <div class="hn">
        <div
          class="hot"
          :class="{ active: time_order == 0 }"
          @click="getDataByTimeOrder(0)"
        >
          最热
        </div>
        |
        <div
          class="new"
          :class="{ active: time_order == 1 }"
          @click="getDataByTimeOrder(1)"
        >
          最新
        </div>
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <Waterfall :list="imgList" />
    </van-list>
    <div class="kong" v-show="total == 0">
      <div class="image">
        <img src="./images/design.png" />
      </div>
      <div class="text">当前分类暂无模板</div>
    </div>
  </div>
</template>

<script>
import Waterfall from "@/components/Waterfall";
export default {
  name: "Model",
  props: ["searchKey"],
  data() {
    return {
      //头部导航
      //url中可改变的数据
      second_kind_id: 0, // 控制标题栏下划线，和请求的第二id
      pageno: 1, //请求页数
      time_order: 0, //数据是最热或者最新
      titleList: [{ kindId: 0, kindTitle: "全部" }],
      //获取下面模板内容
      picList: [],
      //模板总个数
      total: 0,
      loading: true,
      finished: false,
    };
  },
  created() {
    this.getTitleData();
    this.getData();
  },
  components: { Waterfall },
  computed: {
    //为了复合瀑布流的数据，需要添加一些属性添加
    imgList() {
      return this.picList.filter((item) => {
        item.imgUrl = item.previewUrl;
        return true;
      });
    },
  },
  methods: {
    //根据获取数据
    async getData() {
      const res = await this.$API.get(
        `/vv/template/wxSmallAppSearch.do?_dataType=json&client_type=40&pageNo=${this.pageno}&pageSize=20&kw=${this.searchKey}&second_kind_id=${this.second_kind_id}&time_order=${this.time_order}&use_times_order=0&collection_times_order=0&business_type=1%2C2%2C3&_dataClientType=3`
      );
      if (res.status !== 200)
        return this.$toast.fail("获取" + this.searchKey + "数据失败");
      this.picList = this.picList.concat(res.data.body.templates);
      this.total = res.data.body.totalCount;
      this.pageno++;
      this.loading = false;
    },
    //获取表头标题
    async getTitleData() {
      const res = await this.$API.get(
        "/vv/designkind/getDesignKindBasicInfo.do?_dataType=json&client_type=40&type=2&_dataClientType=3"
      );
      if (res.status !== 200) return this.$toast.fail("获取失败");
      this.titleList = this.titleList.concat(
        res.data.body.data.secondLabel.slice(0, 29)
      );
    },
    //触底加载
    onLoad() {
      if (this.picList.length === this.total) {
        this.finished = true;
      }
      this.getData();
    },
    //点击最新 或 最热 按钮
    getDataByTimeOrder(order) {
      if (this.time_order == order) return;
      this.time_order = order;
      this.pageno = 1;
      this.picList = [];
      this.getData();
    },
    //点击标题栏改变第二id，切换高亮，并发送请求
    getDataBySecondId(secondId) {
      if (this.second_kind_id == secondId) return;
      this.second_kind_id = secondId;
      this.pageno = 1;
      this.picList = [];
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.model_contain {
  ::-webkit-scrollbar {
    display: none;
  }
  .title {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 10px;
    overflow: auto;
    .title_item {
      white-space: nowrap;
      font-size: 15px;
      position: relative;
      line-height: 42.5px;
      margin: 0 10px;
      &:first-child {
        font-weight: 700;
        margin-left: 0;
      }
    }
    .active:after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 20px;
      height: 3px;
      border-radius: 3px 3px 0 0;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      background-color: #0773fc;
    }
  }
  .sorWrap {
    height: 57px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    .sotr_text {
      font-size: 17px;
    }
    .hn {
      display: flex;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.4);
      .hot {
        padding: 0 10px;
      }
      .new {
        padding: 0 0 0 10px;
      }
      .active {
        color: rgba(0, 0, 0, 0.8);
      }
    }
  }
  .kong {
    position: relative;
    width: 190px;
    height: 190px;
    top: calc(50vh - 150px);
    left: 50vw;
    text-align: center;
    transform: translate(-50%, -50%);
    .image {
      width: 100px;
      height: 100px;
      margin: auto;
      img {
        width: 100%;
      }
    }
    .text {
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
      margin-top: 5px;
    }
  }
}
</style>